@use '../theme/density.scss';

:host {
  --mdc-text-field-label-ink-color: var(
    --mdc-theme-text-secondary-on-background
  );
  --mdc-text-field-ink-color: var(--mdc-theme-text-secondary-on-background);
  --mdc-text-field-fill-color: var(--mdc-theme-surface-canvas);
  --mdc-text-field-idle-line-color: var(--mdc-theme-border);
  --mdc-text-field-hover-line-color: var(--mdc-theme-text-icon-on-background);
  --mdc-text-field-outlined-idle-border-color: var(--mdc-theme-border);
  --mdc-text-field-outlined-hover-border-color: var(
    --mdc-theme-text-icon-on-background
  );
  --mdc-text-field-outlined-disabled-border-color: var(--cv-theme-outline-12);
  --mdc-text-field-disabled-ink-color: var(--cv-theme-on-surface-38);
  --mdc-typography-subtitle1-font-family: var(
    --mdc-typography-body1-font-family
  );
  --mdc-typography-subtitle1-font-size: var(
    --mdc-typography-body1-font-size,
    1rem
  );
  --mdc-typography-subtitle1-font-weight: var(
    --mdc-typography-body1-font-weight,
    400
  );
}

.mdc-text-field:not(.mdc-text-field--textarea) {
  height: density.density-height(56px);

  .mdc-floating-label--float-above {
    transform: translateY(#{density.density-height(-37.25px, 0, -2px)}) scale(1);
  }

  &.mdc-text-field--with-leading-icon .mdc-floating-label--float-above {
    transform: translateY(#{density.density-height(-37.25px, 0, -2px)})
      translateX(-32px) scale(1);
  }
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
  color: var(--mdc-theme-text-icon-on-background);
}

// Styles for loading state
.mdc-text-field--outlined:not(
    .mdc-text-field--with-trailing-icon
  ).cv-text-field--loading
  .mdc-text-field__input {
  width: calc(100% - 32px);
}

.mdc-text-field--outlined.mdc-text-field--with-trailing-icon.cv-text-field--loading {
  padding-right: 48px;
}

.mdc-text-field--outlined.mdc-text-field--with-leading-icon.cv-text-field--loading
  .mdc-text-field__input {
  width: calc(100% - 80px);
}

.text-field-loading {
  // set the color of the circular progress spinner
  --mdc-theme-primary: var(
    --cv-text-field-loading-color,
    var(--cv-theme-primary)
  );

  position: absolute;
  right: 0;
  align-self: center;
  padding: 12px;
}
